<nz-card>
  <ng-template #body>
    <div>
      <div style="margin-bottom: 16px;">
        <button nz-button [nzType]="'primary'" (click)="add()">
          <span>新增</span>
        </button>
      </div>
      <nz-table #nzTable
                [nzShowTotal]="true"
                [nzTotal]="total"
                [nzAjaxData]="pageData"
                [nzPageSize]="10"
                (nzPageIndexChangeClick)="refreshPageNum($event)">
        <thead nz-thead>
          <tr>
            <th nz-th><span>名称</span></th>
            <th nz-th><span>编号</span></th>
            <th nz-th><span>图标</span></th>
            <th nz-th><span>操作</span></th>
          </tr>
        </thead>
        <tbody nz-tbody>
        <tr nz-tbody-tr *ngFor="let data of nzTable.data">
          <td nz-td>
            {{data.name}}
          </td>
          <td nz-td>{{data.no}}</td>
          <td nz-td><nz-avatar [nzSize]="'small'" [nzSrc]="data.icon"></nz-avatar></td>
          <td nz-td>
            <nz-popconfirm [nzTitle]="'确定要删除该分类？'" (nzOnConfirm)="delete(data)" (nzOnCancel)="cancel()">
              <a nz-popconfirm>删除</a>
            </nz-popconfirm>
          </td>
        </tr>
        </tbody>
      </nz-table>
    </div>
  </ng-template>
</nz-card>
